import { Component } from "react";

import Son from "./Son";

import NameContext from "./NameContext";
import ColorContext from "./ColorContext";

export default class Parent extends Component {
  render() {
    return (
      <NameContext.Consumer>
        {(value) => (
          <div className="box">
            <p>Parent</p>
            <ul>
              <NameContext.Consumer>
                {(value) => <li>NameContext: {value}</li>}
              </NameContext.Consumer>

              <ColorContext.Consumer>
                {(value) => <li>ColorContext: {value}</li>}
              </ColorContext.Consumer>
            </ul>
            <hr />

            <NameContext.Provider value="王五">
              <Son />
            </NameContext.Provider>
          </div>
        )}
      </NameContext.Consumer>
    );
  }
}
